<template>
  <div class="favor">
      <top></top>
      <div class="index10 favor1">
        <div class="index11">
            <div class="index27">
                <el-empty v-if="tableData.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
                <div v-if="tableData.length > 0" class="index33" style="margin-bottom:10px" v-for="(item,index) in tableData" :key="index" @click="toInfo(item.listId)">
                    <div class="index34">
                    <img :src="item.image.split(',')[0]">
                    </div>
                    <div class="index35">
                    <div class="index36">
                        <div class="index22">{{item.name}}</div>
                        <div class="index23">餐厅地址:{{item.address}}</div>
                        <div class="index24">营业时间:{{item.open}}</div>
                        <div class="index25" @click.stop="removeFoodFavor(item.id)">取消</div>
                    </div>
                    </div>
                </div>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="search.pageSize"
              :current-page="search.pageNumber"
              @current-change="handleCurrentChange"
              :total="total">
            </el-pagination>
        </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {getFoodFavorPage,removeFoodFavor} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    data() {
      return{
        search: {
          pageNumber: 1,
          pageSize:12
        },
        total: 0,
        tableData: []
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      toInfo(id) {
        this.$router.push("/foodInfo?id=" + id)
      },
      handleCurrentChange(val) {
        this.search.pageNumber = val
        this.getFoodFavorPage()
      },
      getFoodFavorPage() {
        getFoodFavorPage(this.search).then(res => {
          if (res.code == 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },
      removeFoodFavor(id) {
        removeFoodFavor({ids: id}).then(res => {
          if (res.code == 1000) {
            this.$message({
              message: "取消收藏成功",
              type: 'success'
            });
            this.getFoodFavorPage()
          }
        })
      }
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.getFoodFavorPage()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/favor.css');
@import url('../../assets/css/index.css');
</style>